<template>
    <div>
        <h2>Markdown <a href="http://www.mavoneditor.com/">官网</a></h2>

        <!--工具栏-->
        <select v-model="mkConfig.language" class="select-control">
            <option value="">--请选择语言--</option>
            <option value="zh-CN">简体中文</option>
            <option value="zh-TW">繁体中文</option>
            <option value="en">英文</option>
            <option value="fr">法语</option>
            <option value="pt-BR">葡萄牙语</option>
            <option value="ru">俄语</option>
            <option value="de">德语</option>
            <option value="ja">日语</option>
        </select>

        <select v-model="mkConfig.fontSize" class="select-control">
            <option value="">--编辑区字号--</option>
            <option value="14px">14px</option>
            <option value="16px">16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
            <option value="22px">22px</option>
            <option value="24px">24px</option>
            <option value="26px">26px</option>
        </select>

        <select v-model="mkConfig.previewBackground" class="select-control">
            <option value="">--预览区背景--</option>
            <option value="#fff">经典</option>
            <option value="#333">暗黑</option>
            <option value="#999">浅灰</option>
            <option value="#218485">军绿</option>
        </select>

        <!--markdown功能-->
        <mavon-editor v-model="mkConfig.content" ref="md"
                      :language="mkConfig.language"
                      :fontSize="mkConfig.fontSize"
                      :boxShadow="true"
                      :toolbarsBackground="mkConfig.toolbarsBackground"
                      :previewBackground = "mkConfig.previewBackground"
                      :placeholder = "mkConfig.placeholder"
                      :editable = "true"
                      :toolbarsFlag = "true"
                      :autofocus = "true"
                      :toolbars="mkConfig.toolbars"
                      @change="handleChange"
                      @save="handleSave"
                      @imgAdd="handleImgAdd"
                      @imgDel="handleImgDel"


        >
            <!-- 左工具栏前加入自定义按钮 -->
            <template slot="left-toolbar-before">
                <button
                        type="button"
                        @click="$click('test')"
                        class="op-icon fa fa-mavon-align-left"
                        aria-hidden="true"
                        title="自定义1"
                ></button>
            </template>
            <!-- 左工具栏后加入自定义按钮  -->
            <template slot="left-toolbar-after">
                <button
                        type="button"
                        @click="$click('test')"
                        class="op-icon fa fa-mavon-align-left"
                        aria-hidden="true"
                        title="自定义2"
                ></button>
            </template>
            <!-- 右工具栏前加入自定义按钮  -->
            <template slot="right-toolbar-before">
                <button
                        type="button"
                        @click="$click('test')"
                        class="op-icon fa fa-mavon-align-left"
                        aria-hidden="true"
                        title="自定义3"
                ></button>
            </template>
            <!-- 右工具栏后加入自定义按钮  -->
            <template slot="right-toolbar-after">
                <button
                        type="button"
                        @click="$click('test')"
                        class="op-icon fa fa-mavon-align-left"
                        aria-hidden="true"
                        title="自定义4"
                ></button>
            </template>
        </mavon-editor>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'

    export default {
        name: "MarkdownView",
        components : {
            mavonEditor
        },
        data(){
            return {
                mkConfig : {
                    content: "",    // 编辑区内容
                    language: "",   // 语言
                    fontSize : "",  // 编辑区字号
                    toolbarsBackground : "#fff",  //工具栏背景
                    previewBackground : "",  // 预览区背景
                    placeholder: "请开始编辑内容...",
                    navigation : true,
                    toolbars : {
                        bold: true, // 粗体
                        italic: true, // 斜体
                        header: true, // 标题
                        underline: true, // 下划线
                        strikethrough: true, // 中划线
                        mark: true, // 标记
                        superscript: true, // 上角标
                        subscript: true, // 下角标
                        quote: true, // 引用
                        ol: true, // 有序列表
                        ul: true, // 无序列表
                        link: true, // 链接
                        imagelink: true, // 图片链接
                        code: true, // code
                        table: true, // 表格
                        fullscreen: true, // 全屏编辑
                        readmodel: true, // 沉浸式阅读
                        htmlcode: true, // 展示html源码
                        help: true, // 帮助
                        /* 1.3.5 */
                        undo: true, // 上一步
                        redo: true, // 下一步
                        trash: true, // 清空
                        save: true, // 保存（触发events中的save事件）
                        /* 1.4.2 */
                        navigation: true, // 导航目录
                        /* 2.1.8 */
                        alignleft: true, // 左对齐
                        aligncenter: true, // 居中
                        alignright: true, // 右对齐
                        /* 2.2.1 */
                        subfield: true, // 单双栏模式
                        preview: true, // 预览
                    }
                }
            }
        },
        methods : {
            handleChange(text,html){ // 编辑区发生变化的回调事件
                // text获取到编辑区中的纯文本
                // html编辑区中的内容以html结构呈现
            },
            handleSave(text,html){ // ctrl + s 的回调事件(保存按键,同样触发该回调)
                console.log(text)
                console.log(html)
            },
            handleImgAdd: function (pos, imgfile) { //图片文件添加回调事件(pos: 图片在列表中的位置, File: File Object)
                // console.log(pos); // 获取文件的编号
                // console.log(imgfile); // 获取文件信息
                // 文件上传的步骤
                //第一步..将图片上传到服务器
                let formData = new FormData();
                formData.append("image", imgfile)
                axios({
                    url: 'server url',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                    /**
                     * $vm 指为mavonEditor实例，可以通过如下两种方式获取
                     * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
                     * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
                     */
                    this.$refs.md.$img2Url(pos, url);
                })
                // 具体细节：https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/upload-images.md
            },
            handleImgDel(pos,imgfile){
                console.log(pos); // 删除文件的编号
                console.log(imgfile); // 删除文件的信息
            }
        }
    }
</script>

<style scoped>
    .select-control {
        height: 30px;
        padding-left: 8px;
        margin-bottom: 20px;
        background: #333;
        color: #ccc;
        font-weight: bold;
        margin-right: 10px;
    }
    .select-control:hover option {
        color: #fff;
    }
</style>